<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <title>websocket</title>
  <script type="text/javascript" src="/js/jquery/jquery-3.4.1.min.js"></script>
  <script src="/js/stomp/stomp.min.js"></script>
  <script src="/js/sockjs/sockjs.min.js"></script>
</head>

<body>
<div style="margin: auto;text-align: center">
  <h1>Welcome to websocket</h1>
</div>
<br/>
<div style="margin: auto;text-align: center">
  <select id="onLineUser">
    <option>--所有--</option>
  </select>
  <input id="text" type="text"/>
  <button onclick="send()">发送消息</button>
</div>
<br>
<div style="margin-right: 10px;text-align: right">
  <button onclick="closeWebSocket()">关闭连接</button>
</div>
<hr/>
<div id="message" style="text-align: center;"></div>
<input type="text" th:value="${username}" id="username" style="display: none"/>
</body>


<script type="text/javascript">
  var webSocket;
  var commWebSocket;
  if ("WebSocket" in window) {
    webSocket = new WebSocket("wss://xiaoyuaichiyu.asia/websocket/" + document.getElementById('username').value);

    //连通之后的回调事件
    webSocket.onopen = function () {
      //webSocket.send( document.getElementById('username').value+"已经上线了");
      console.log("已经连通了websocket");
      setMessageInnerHTML("已经连通了websocket");
    };

    //接收后台服务端的消息
    webSocket.onmessage = function (evt) {
      var received_msg = evt.data;
      console.log("数据已接收:" + received_msg);
      var obj = JSON.parse(received_msg);
      console.log("可以解析成json:" + obj.messageType);
      //1代表上线 2代表下线 3代表在线名单 4代表普通消息
      if (obj.messageType == 1) {
        //把名称放入到selection当中供选择
        var onlineName = obj.username;
        var option = "<option>" + onlineName + "</option>";
        $("#onLineUser").append(option);
        setMessageInnerHTML(onlineName + "上线了");
      } else if (obj.messageType == 2) {
        $("#onLineUser").empty();
        var onlineName = obj.onlineUsers;
        var offlineName = obj.username;
        var option = "<option>" + "--所有--" + "</option>";
        for (var i = 0; i < onlineName.length; i++) {
          if (!(onlineName[i] == document.getElementById('username').value)) {
            option += "<option>" + onlineName[i] + "</option>"
          }
        }
        $("#onLineUser").append(option);

        setMessageInnerHTML(offlineName + "下线了");
      } else if (obj.messageType == 3) {
        var onlineName = obj.onlineUsers;
        var option = null;
        for (var i = 0; i < onlineName.length; i++) {
          if (!(onlineName[i] == document.getElementById('username').value)) {
            option += "<option>" + onlineName[i] + "</option>"
          }
        }
        $("#onLineUser").append(option);
        console.log("获取了在线的名单" + onlineName.toString());
      } else {
        setMessageInnerHTML(obj.fromusername + "对" + obj.tousername + "说：" + obj.textMessage);
      }
    };

    //连接关闭的回调事件
    webSocket.onclose = function () {
      console.log("连接已关闭...");
      setMessageInnerHTML("连接已经关闭....");
    };
  } else {
    // 浏览器不支持 WebSocket
    alert("您的浏览器不支持 WebSocket!");
  }

  //将消息显示在网页上
  function setMessageInnerHTML(innerHTML) {
    document.getElementById('message').innerHTML += innerHTML + '<br/>';
  }

  function closeWebSocket() {
    //直接关闭websocket的连接
    webSocket.close();
  }

  function send() {
    var selectText = $("#onLineUser").find("option:selected").text();
    if (selectText == "--所有--") {
      selectText = "All";
    } else {
      setMessageInnerHTML(document.getElementById('username').value + "对" + selectText + "说：" + $("#text").val());
    }
    var message = {
      "message": document.getElementById('text').value,
      "username": document.getElementById('username').value,
      "to": selectText
    };
    webSocket.send(JSON.stringify(message));
    $("#text").val("");

  }
</script>

</html>